<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于Ajax灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">我要求助</div>
                <div class="layui-card-body ">
                    <form class="layui-form">
                        <input type="hidden" id="imgIds" name="imgIds">
                        <div class="layui-form-item">
                            <label for="peopleName" class="layui-form-label">
                                <span class="x-red">*</span>求助者</label>
                            <div class="layui-input-inline">
                                <input type="text" id="peopleName" name="peopleName" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-form-mid layui-word-aux">
                                <span class="x-red">*</span>填写真实姓名
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="peopleTel" class="layui-form-label">
                                <span class="x-red">*</span>联系方式</label>
                            <div class="layui-input-inline">
                                <input type="text" id="peopleTel" name="peopleTel" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-form-mid layui-word-aux">
                                <span class="x-red">*</span>填写手机号
                            </div>
                        </div>
                        <div class="layui-form-item x-city" id="start">
                            <label class="layui-form-label"><span class="x-red">*</span>所在地</label>
                            <div class="layui-input-inline">
                                <select name="province" lay-filter="province">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="city" lay-filter="city">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="area" lay-filter="area">
                                    <option value="">请选择县/区</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="disasterType" class="layui-form-label">
                                <span class="x-red">*</span>灾难类型</label>
                            <div class="layui-input-inline">
                                <select name="disasterType" lay-verify="required" id="disasterType" lay-verify="required">
                                    <option>地震</option>
                                    <option>洪水</option>
                                    <option>台风</option>
                                    <option>泥石流</option>
                                    <option>其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="demandType" class="layui-form-label">
                                <span class="x-red">*</span>需求类型</label>
                            <div class="layui-input-inline">
                                <select name="demandType" lay-verify="required" id="demandType" lay-verify="required">
                                    <option>食品物资</option>
                                    <option>生活物资</option>
                                    <option>医疗物资</option>
                                    <option>其他</option>
                                </select>
                            </div>
                        </div>
                        <%--<div class="layui-form-item">--%>
                            <%--<label for="helpType" class="layui-form-label">--%>
                                <%--<span class="x-red">*</span>帮助类型</label>--%>
                            <%--<div class="layui-input-inline">--%>
                                <%--<input type="text" id="helpType" name="helpType" lay-verify="required"--%>
                                       <%--autocomplete="off" class="layui-input"></div>--%>
                        <%--</div>--%>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label">
                                <span class="x-red">*</span></label>
                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn" id="test1">
                                    <i class="layui-icon">&#xe67c;</i>选择图片
                                </button>
                                <button type="button" class="layui-btn layui-btn-normal" id="testListAction">执行上传</button>
                            </div>
                            <div class="layui-upload-list" id="layui-upload-list">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label for="remark" class="layui-form-label">
                                <span class="x-red">*</span>求助备注</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入帮助类型" class="layui-textarea" id="remark" name="remark" lay-verify="required"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label"></label>
                            <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/xcity.js"></script>
<script>
    layui.use(['form','code', 'upload'], function(){
        form = layui.form;
        layui.code();
        $('#start').xcity();

        var upload = layui.upload;
        var imgIds = [];
        var uploadInst = upload.render({
            elem: '#test1',
            url: './disasterimg/fileUpload',
            size: 1024,
            auto: false,
            multiple: true,
            number: 3,
            bindAction: '#testListAction',
            choose: function(obj) {
                this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                obj.preview(function(index, file, result) {
                    var img = '<img class="layui-upload-img" src="'+ result +'" id="img1" style="object-fit: cover; width: 92px; height: 92px; margin-right: 10px;">';
                    $('#layui-upload-list').append(img);
                })
            },
            done: function(res) {
                if(res.code === 200) {
                    layer.msg(res.msg);
                    imgIds.push(res.data.join(""));
                    $("#imgIds").val(imgIds.join(","));
                }
            },
            error: function() {
                layer.msg(res.msg);
            }
        })

        form.on('submit(add)', function(data) {
            var account = JSON.parse(window.sessionStorage.getItem("account"));
            var peopleAddress = data.field.province + "/" + data.field.city + "/" + data.field.area;
            data.field.peopleAddress = peopleAddress;
            data.field.applicantId = account.id;
            if(data.field.imgIds === '') {
                layer.msg('请先上传图片')
                return false;
            }
            $.ajax({
                url: './materials/addMaterials',
                type: 'post',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                dataType: 'json',
                success: function(data) {
                    layer.msg(data.msg, {time: 1000}, function() {
                        window.location.reload();
                    });
                },
                error: function() {
                    layer.msg(data.msg);
                }
            })
            return false;
        })
    });
</script>
</html>
